<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>waterfall</title>
    <style type="text/css">
        .content{
            position: relative;
        }
        .item{
            position: absolute;
            width: 200px;
            margin-right: 10px;
            margin-top: 10px;
            transition: all 1s;
        }
        .h1{
            height:200px;
            background-color: #f4b300;
        }
        .h2{
            height: 300px;
            background-color: #691BB8;
        }
        .h3{
            height: 400px;
            background-color: #006ac1;
        }
    </style>

</head>
<body>
    <div class="content">
        <div class="item h1">1</div>
        <div class="item h2">2</div>
        <div class="item h3">3</div>
        <div class="item h1">4</div>
        <div class="item h3">5</div>
        <div class="item h2">6</div>
        <div class="item h1">7</div>
        <div class="item h1">8</div>
        <div class="item h3">9</div>
        <div class="item h2">10</div>
        <div class="item h1">11</div>
        <div class="item h3">12</div>
        <div class="item h2">13</div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

        waterfall();

        $(window).resize(function () {
            waterfall()
        });


        function waterfall() {

            var colLength = parseInt($(".content").width() / $(".item").width());
            var itemArr = [];
            for(var i=0;i<colLength;i++){
                itemArr[i]=0
            }
            $(".item").each(function () {
                var minValue = Math.min.apply(null,itemArr);
                var minIndex = itemArr.indexOf(minValue);

                $(this).css({
                    top: itemArr[minIndex],
                    left: $(this).outerWidth(true)*minIndex
                });

                itemArr[minIndex] += $(this).outerHeight(true)
            })

        }


    </script>
</body>
</html>